<template>
  <div class="pailuanthird">
    <div class="headerDiv"></div>
    <header class="aui-bar aui-bar-nav aui-barPailuan">
      <a class="aui-pull-left aui-padded-l-15" @click="goBack()">
        <img class="aui-padded-r-10" src="../img/left.png" alt="">
        尿检
      </a>
    </header>
    <section class="sectionMagin">
      <div class="niaoJian4">
        <img class="public" src="../img/inside/public.png" alt="">
        <img class="publicItem" src="../img/inside/item_49.png" alt="">
        <img class="outer_1" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_2" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_3" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_4" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_5" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_6" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_7" src="../img/outer/outer_1.png" alt="">
        <img  class="outer_8" src="../img/outer/outer_1.png" alt="">
      </div>
      <div class="clearfloat"></div>

      <div class="bHint bottomBtn" style="height:4.5rem">
        <div class="aui-font-size-12 aui-text-center aui-margin-b-10 textColor">正在等待试纸反应，检测将于20秒后开始。</div>
        <div @click="zhongDuan()" class="aui-btn SubBtnNiaoJianThird">中断检测</div>
      </div>
    </section>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'

  export default {
    name: 'NiaoJianThird',
    data () {
      return {
      }
    },
    computed: {
      ...mapState([
        'IsNiaoReDone',
        'NiaoJianData',
        'stateEnd',
        'connectEnd',
        'NJdetetioniData',
        'displayNJdetetioniData'
      ])
    },
    components: {
      Loading
    },
    watch: {
      IsNiaoReDone(val){
        this.displayRE()
        // this.AxiosSeturine()
        // alert(val)
      },
      connectEnd (val) {
        this.stateEnd = val
      },
      stateEnd (val) {
        this.stateEnd = val
        // this.initData()
      }
    },
    created () {
      window.hilink.setTitleVisible(false)
      this.initData()
    },
    methods: {
      ...mapMutations([ 'SETValueChangeType','AxiosToData','OPNCLOSS','AxiosSeturine'
      ]),
      zhongDuan(){
        this.OPNCLOSS()
        this.$router.go(-1)
      },
      goBack(){
        clearTimeout(window.niaojiansetTimeOUTn);
        this.OPNCLOSS()
        this.$router.go(-1)
      },
      displayRE () {
        if (this.IsNiaoReDone==1) {
          this.AxiosToData()
          // this.$router.push({path:'/niaojianforth'})
          this.$router.replace({path:'/niaojianforth'})
        }
      },
      initData () {
        // this.SETValueChangeType({num: 1})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  /*@media screen and (max-width:320px){*/
  /*body{font-size: 12px;}*/
  /*.order{padding-top:0.1rem; padding-right: 0.1rem;}*/
  /*.stepImg2 img{height:5rem}*/
  /*}*/
  /*@media screen and (min-width:321px) and (max-width:376px){*/
  /*body{font-size: 14px;}*/
  /*}*/
  /*@media screen and (min-width:377px) and (max-width:415px){*/
  /*body{font-size: 16px;}*/
  /*.order{padding-right: 0.1rem;}*/
  /*}*/
  .headerDiv{
    height: 2rem;
    width: 100%;
    /*background-color: #288af0;*/
  }
  body{background: #fff !important;}
  .aui-barPailuan{
    border-bottom: 3px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px!important;
    font-weight: bold!important;
  }
  /*.step1{*/
  /*width:100%;*/
  /*!*position:relative;*!*/
  /*}*/
  .heartImg1{  /*心率图片设置*/
    display: block;
    width:70%;
    margin:2rem auto;
    /*margin-top:2rem;*/
  }
  .order{
    margin-top:1rem;
    margin-left:2rem;
    width:1.5rem;
    height:1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    background: #ccc;
    text-align: center;
    color:#000;
  }
  .method{
    width:80%;
    margin:auto;
  }
  .stepImg2 img{height:10rem;margin:auto}
  .stepImg3 img{width:80%;margin:auto;padding-top:5rem}
  .yunQistep2 img{height:8rem;margin:auto}

  .niaoJian4{
    width:100%;
    height:18rem;
    position: relative;
  }
  .niaoJian4 img{display:block;width:2.5rem;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
  .niaoJian4 .public{
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25%;
    margin-left:-25%;
    z-index: 999;
  }
  .niaoJian4 .publicItem{
    width:30%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-15%;
    margin-left:-15%;
    z-index: 999;
  }
  .niaoJian4 .outer_1{top:-70%}
  .niaoJian4 .outer_2{bottom:-70%}
  .niaoJian4 .outer_3{left:-70%}
  .niaoJian4 .outer_4{right:-70%}
  .niaoJian4 .outer_5{top:-50%;right:-50%}
  .niaoJian4 .outer_6{top:-50%;left:-50%}
  .niaoJian4 .outer_7{bottom:-50%;right:-50%}
  .niaoJian4 .outer_8{bottom:-50%;left:-50%}

  /*是否怀孕样式*/
  .verify img{width:80%;margin:auto}
  .weiHuaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;right:0}
  .huaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;left:0}


  /*排卵*/
  .ovulation{position: absolute;top:50%;margin-top:-25%;left:50%;margin-left:-25%}



  .borStyle{
    width:90%;
    border:1px solid #ccc;
    margin:0 5%;
  }
  .bHint{
    width:100%;
    margin-top: 10rem;
    /*position: absolute;*/
    /*bottom:1rem;*/
  }
  .SubBtnNiaoJianThird{
    width: 90%;
    height: 2rem!important;
    line-height: 2rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1rem!important;
    border: 1px solid #ccc;
    border-radius: 1.125rem!important;
    background: #f7f7f7!important;
  }
  .step2{
    width:100%;
  }


  /*可视心率showHeart1页面的样式*/
  .heartStep{
    padding-left:1.5rem;
  }
  .radioStyle{
    display: inline-block;
    width:1rem;
    height:1rem;
    background: #008fd9;
    color: #fff;
    border-radius: 1rem;
    text-align: center;
  }
  /*可视心率showHeart2页面的样式*/
  .heart2{/*可视心率showHeart2图片位置*/
    height:12rem;
    width:100%;
    margin-top:2rem;
  }
  .heart2 img{margin:auto}

  .audio{
    display: block;
    width:4rem;
    margin:auto;
    margin-top:-3rem;
  }
  .heartData{
    border-right:1px solid #ccc;
  }


  .textColor{
    color:#ccc;
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
</style>

